<template>
    <div class="preview-form" v-if="visible">
        <div class="final-preview">
            <div class="final-preview-inner">
                <div class="preview-title">
                    {{ pageState.title }}
                </div>
                <div class="iframe-container">
                    <iframe :src="previewURL" width="375" frameborder="0" class="iframe-placeholder"
                        :height="pageState.props && pageState.props.height ? pageState.props.height : '560'">
                    </iframe>
                </div>
            </div>
        </div>

        <a-drawer title="设置面板" placement="right" width='400' :closable="true"
            @close="close"
            :open="visible">
            <a-form layout="horizontal" :model="form"  :rules="rules" v-bind="formItemLayout">
                <a-form-item name="preview" label="扫码预览">
                    <canvas ></canvas>
                </a-form-item>
                <a-form-item  name="coverImg" label="封面">
                    <styled-uploader/>
                </a-form-item>
                <a-form-item  name="title" label="标题" required>
                    <a-input placeHolder="标题"  v-model:value="form.title"></a-input>
                </a-form-item>
                <a-form-item  name="desc" label="描述" required>
                    <a-input placeHolder="描述" v-model:value="form.desc"></a-input>
                </a-form-item>
                <a-form-item >
                    <a-button type="primary" >保存</a-button>
                    <a-button  >取消</a-button>

                </a-form-item>
            </a-form>
        </a-drawer>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue'
import { GlobalDataProps } from '@/store'
import { baseH5URL } from '@/main'
import { useStore } from 'vuex'
import StyledUploader from '@/components/StyledUploader.vue'
import {
    Drawer as aDrawer,
    Form as aForm,
    FormItem as aFormItem,
    Input as aInput,
    Button as aButton,
    Row as aRow,
    Col as aCol,
} from 'ant-design-vue'
import useSaveWork from '@/hooks/useSaveWork'
const props = withDefaults(defineProps<{
    visible: boolean;
}>(),
    {
        visible: false,
    }
)
const emit = defineEmits(["on-close"]);
const close = () => {
    console.log('close');
    emit("on-close", false)
}
const store = useStore<GlobalDataProps>()
const pageState = computed(() => store.state.editor.page)
const previewURL = computed(() => {
    return `${baseH5URL}/p/preview/${pageState.value.id}-${pageState.value.uuid}`
})
const {title, desc} = pageState.value
const {saveWork, saveIsLoading} = useSaveWork(true)
const form = reactive({
    title: title || '',
    desc: desc || '',
    uploaded: { data: {url: ''}}
})

const rules = reactive({
    title: [
        { required: true, message: '标题不能为空', trigger: 'blur' },
    ],
    desc: [
        { required: true, message: '描述不能为空', trigger: 'blur' },
    ]
})
const formItemLayout = computed(() => {
  return {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      }
});

</script>

<style lang="less" scoped>
.final-preview {
    position: absolute;
    width: calc(100% - 400px);
    height: 100%;
    background: transparent;
    top: 0;
    left: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.final-preview-inner {
    width: 430px;
    height: 870px;
    padding: 60px 28px;
    position: relative;
    background: url('~@/assets/phone-back.png') no-repeat;
    background-size: cover;

    .preview-title {
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-weight: bold;
    }

    .iframe-container {
        width: 100%;
        height: 706px;
        overflow-y: auto;
        overflow-x: hidden;
    }

}

.iframe-placeholder {
    background: url('~@/assets/loading.svg') no-repeat 50% 50%;
    background-size: 50px;
}
</style>